portabilityfandomcom-20200223-history
Mentoring:Z/X -Zillions of enemy X- Wiki
Mentoring requests →''' '''What is your username? Are you an admin on the wiki you are asking about? Aeris Ventaile. Currently an admin. Please link to the wiki (or the specific templates or pages you want help with) here: Z/X -Zillions of enemy X- Wiki. The specific template in work can be found here. What would you like help with (e.g. styling, making, or converting an infobox or making a page portable)? I'm planning to convert our current infoboxes into the portable ones but the CSS doesn't shown correctly. Particularly, we have spacing problem with two data shown in the title (EN text, followed with JP text under it) and the data does not align correctly with the label under MonoBook skin. Lastly, I want to create some padding between the image and the box itself like the current non-portable template. Any other information (e.g. links, screenshots, or snippets): All non-portable infoboxes and all pages that able to use the sandbox template. The CSS style can be found in Common.css under /* Infoboxes */. In order to ensure you can implement and maintain a Mentoring solution, how would you classify your technical skill level (or those of whomever will be maintaining your Templates)? I have decent knowledge in web design and wikicodes. -- Aeris Ventaile 04:35, February 12, 2016 (UTC) Responses Can you add screenshots showing the differences you see in monobook. The appearance might be affected by some custom CSS you have in the monobook skin. Anyway, from what I can see the wiki has already done a very good job with converting these infoboxes, see http://infoboxpreview.appspot.com/?snapshotId=-KAK2iDKi-6DMyERlmxD . Edit: The wiki seems to use ruby tags to display the japanese versions, maybe that's what you need to change for the monobook skin? Dessamator (talk) 10:41, February 12, 2016 (UTC) :Here's a screenshot under monobook (http://imgur.com/626XVgK). For some reason, the label and data does not align properly. I also want to somehow put both title under one code or separate them with tag if possible due to the padding. Other than that, I try to put some "border" around the image like our old infobox, but my attempt with padding and margin so far only move the image from its original position (http://imgur.com/bCC5b5r). :Edit: I have managed to fix the monobook problem, which is caused by the default header padding set by the theme. Now all that's left is this template, we still have some problem with inline styling. :Aeris Ventaile 08:49, February 13, 2016 (UTC) ::Good to know you fixed the monobook issue. The inline styling added to the template doesn't work because the infobox uses a flexbox and certain css attributes don't work with it. Anyway, I added some markup to your CSS, see : http://infoboxpreview.appspot.com/?snapshotId=-KAPugR2XsSSGWA5Hsg8 .pi-theme-set-infobox section:nth-of-type(2) .pi-data:nth-child(2) .pi-data-value { margin-right:auto; } .pi-theme-set-infobox section:nth-of-type(2) .pi-data:nth-child(3) .pi-data-value { margin-left:auto; } :: I suppose you can also apply that inline, though I didn't test it and am not sure it will actually work. Inline CSS is discouraged in portable infoboxes anyway. ::Dessamator (talk) 13:50, February 13, 2016 (UTC) :::It worked, but also somewhat indiscriminately. If an infobox only contain the "next" data—which is supposed to be right-aligned, then it will be placed on the left side as it was the only child of the group. Same problem also happen with "last-of" and even/odd rules, so I guess we will stick with horizontal group for a while until we find another workaround. Other than that, it worked perfectly. :::Aeris Ventaile 08:10, February 14, 2016 (UTC) ::::Good to know it worked. You can also apply a semi hack that will make it work by specifying something like . Then you can target that using CSS.22:55, March 2, 2016 (UTC)